Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP22。

在 EP 19 有提到要客製化設定系統角色扮演 Prompt。隨著這個脈絡與前一回已經設計的畫面，先來考慮考慮讓畫面 UI 有紀錄此系統角色扮演 Prompt 的相關處理！

首先，先在 Models 底下增加一個 ChatSystemRole 的類別設計：

namespace TopAOAIConnector.Models;

internal class ChatSystemRole
{
    public string? Name { get; set; }
    public string? Prompt { get; set; }
}

如下圖所示：

再找到 ViewModels/SettingPageViewModel 來進行一些調整。

1. 再增加幾個宣告的欄位：

private const string chatSystemRolesFileName = "chat-system-roles.json";

private readonly string chatSystemRolesFilePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), directoryName, chatSystemRolesFileName);

如下圖紅框所示：

2. 調整一下建構式的設計，增加下列程式碼再建構式當中：

if (File.Exists(chatSystemRolesFilePath))
{
    var jsonSettings = File.ReadAllText(chatSystemRolesFilePath);
    var chatSystemRoles = JsonSerializer.Deserialize<ObservableCollection<ChatSystemRole>>(jsonSettings);

    if(chatSystemRoles!.Count > 0)
        ChatSystemRoles = chatSystemRoles;
}

ChatSystemRoles ??= [];

CurrentChatSystemRole = new();

如下圖紅框所示：

3. 增加兩個 ObservableProperty 的設計：

[ObservableProperty]
private ObservableCollection<ChatSystemRole>? _chatSystemRoles;

[ObservableProperty]
private ChatSystemRole? _currentChatSystemRole;

如下圖紅框所示：

4. 增加兩個 RelayCommand 的 Add 與 Delete 方法：

[RelayCommand]
private async Task Add()
{
    System.Diagnostics.Debug.WriteLine($"Add...{chatSystemRolesFilePath}");

    ChatSystemRoles!.Add(CurrentChatSystemRole!);

    var directoryPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), directoryName);
    if (!Directory.Exists(directoryPath))
    {
        Directory.CreateDirectory(directoryPath);
    }

    var jsonSettings = JsonSerializer.Serialize(ChatSystemRoles, options: new()
    {
        Encoder = JavaScriptEncoder.Create(UnicodeRanges.All)
    });
    await File.WriteAllTextAsync(chatSystemRolesFilePath, jsonSettings);

    CurrentChatSystemRole = new ();
}

[RelayCommand]
private void Delete()
{
    System.Diagnostics.Debug.WriteLine($"Delete...");
}

如下圖紅框所示，而 Delete 方法後續再來處理其刪除邏輯：

再切到 Views/SettingPageView 當中找到前一回新設計 System Role 相關 UI 部分，替換成下列 XAML 標記：

<StackPanel Grid.Row="3" Grid.ColumnSpan="2" Margin="0,6">
				<TextBlock Margin="0,6" Text="目前已定義的 System Role：" />
				<ComboBox ItemsSource="{Binding ChatSystemRoles}" >
					<ComboBox.ItemTemplate>
						<DataTemplate>
							<TextBlock Text="{Binding Path=Name}" />
						</DataTemplate>
					</ComboBox.ItemTemplate>
				</ComboBox>
    <StackPanel Margin="0,10" DataContext="{Binding CurrentChatSystemRole}">
        <TextBlock Margin="0,6" Text="Name" />
        <TextBox Watermark="請輸入 System Role 的名稱。" Text="{Binding Path=Name}"/>
        <TextBlock Margin="0,6" Text="Prompt" />
        <TextBox Watermark="請輸入 System Role 的 Prompt 定義。" Text="{Binding Path=Prompt}"/>
    </StackPanel>
</StackPanel>
<StackPanel Grid.Row="3" Grid.Column="1" Margin="6,24" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
    <Button Command="{Binding DeleteCommand}">
        <StackPanel>
            <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Delete" />
            <TextBlock Text="刪除" />
        </StackPanel>
    </Button>
    <Button Command="{Binding AddCommand}">
        <StackPanel>
            <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Add" />
            <TextBlock Text="新增" />
        </StackPanel>
    </Button>
</StackPanel>

替換為綠框所示，與前一回不同的變更處如紅框所示：

偵錯執行(F5)起來試試看。

切到 Setting Page 並在輸入框當中輸入測試文字：

點選 "增加"：

在 ComboBox 當中看到所增加的資料：

完成！！！

而如何讓此設定正確的運用到 Chat 當中，就下回再續吧~~~